class NativeMessageBall {
	systemInfo = null;
	safeArea = null;
	ballView = null;
	clientPos = {};
	movePos = {};
	number = 0;
	thumb = '/static/logo/logo.jpg';
	ableShow = false;
	constructor() {
		this.systemInfo = uni.getSystemInfoSync();
		this.safeArea = this.systemInfo.safeArea;
		this.ballView = new plus.nativeObj.View('ball', {
			top: this.safeArea.bottom - 56 - 80 + 'px',
			left: this.safeArea.right - 56 + 'px',
			height: '56px',
			width: '56px',
			backgroundColor: 'rgba(255,255,255,0)'
		});
		this.ballView.draw([{
				tag: 'rect',
				rectStyles: {
					color: '#ffffff',
					radius: '28px',
					borderColor: '#dbdbdb',
					borderWidth: '1px'
				}
			},
			{
				tag: 'img',
				id: 'thumb',
				src: this.thumb,
				position: {
					top: '10px',
					left: '10px',
					width: '36px',
					height: '36px'
				}
			},
			{
				tag: 'img',
				src: '/static/images/ball/ball-center.png',
				position: {
					top: '3px',
					left: '3px',
					width: '50px',
					height: '50px'
				}
			}, {
				tag: 'rect',
				id: 'badgeRect',
				rectStyles: {
					color: '#ff0000',
					radius: '8px'
				},
				position: {
					top: '9px',
					left: '32px',
					width: '15px',
					height: '15px'
				}
			},
		]);
		this.ballView.addEventListener('click', () => {
			uni.navigateTo({
				url: '/pageTip/douyin/video'
			})
		});
		this.ballView.addEventListener('doubleclick', () => {
			// uni.showModal({
			// 	title: '浮球操作提示',
			// 	content: '双击，切换到最新的聊天用户窗口'
			// });
			
			// uni.navigateTo({
			// 	url: '/pageUser/completion/index'
			// })
		});
		this.ballView.addEventListener('touchstart', e => {
			const {
				clientX,
				clientY
			} = e;
			this.clientPos = {
				x: clientX,
				y: clientY
			};
		});
		this.ballView.addEventListener('touchmove', e => {
			const {
				screenX,
				screenY
			} = e;
			const y = screenY - this.clientPos.y;
			const x = screenX - this.clientPos.x;
			if (y >= this.safeArea.top && y + 56 + 30 <= this.safeArea.bottom) {
				this.movePos.y = y;
			}
			if (x >= this.safeArea.left && x + 56 <= this.safeArea.right) {
				this.movePos.x = x;
			}
			this.ballView.setStyle({
				left: this.movePos.x + 'px',
				top: this.movePos.y + 'px'
			});
		});
		this.ballView.addEventListener('touchend', e => {
			if (this.movePos.x >= 0) {
				const centerPosX = this.movePos.x + 56 / 2;
				let ballLeft = 0;
				if (centerPosX >= this.systemInfo.screenWidth / 2) {
					ballLeft = this.systemInfo.screenWidth - 56;
				}
				this.ballView.setStyle({
					left: ballLeft + 'px'
				});
			}

		});
	}

	show() {
		if (this.ableShow && this.number > 0) {
			this.ballView.show();
		}
	}

	hide() {
		this.ballView.hide();
	}

	setAbleShow(ableShow = false) {
		this.ableShow = ableShow;
		if (this.ableShow) {
			this.show()
		} else {
			this.hide()
		}
	}
	setNoRead(obj = {}) {
		if (!obj.hasOwnProperty('number')) {
			obj.number = 0;
		}
		if (!obj.hasOwnProperty('thumb')) {
			obj.thumb = '/static/logo/logo.jpg';
		}
		if (obj.thumb == this.thumb && obj.number == this.number) {
			return false;
		}
		this.thumb = obj.thumb;
		this.number = obj.number;
		if (this.number > 0) {
			this.addNumber()
		} else {
			this.hide()
		}
	}

	addNumber() {
		this.ballView.draw([{
			tag: 'img',
			id: 'thumb',
			src: this.thumb,
			position: {
				top: '10px',
				left: '10px',
				width: '36px',
				height: '36px'
			}
		}, {
			tag: 'font',
			id: 'numberRect',
			text: this.number > 99 ? '···' : this.number,
			textStyles: {
				color: '#ffffff',
				size: '10px',
				align: 'center',
				verticalAlign: 'middle'
			},
			position: {
				top: '9px',
				left: '32px',
				width: '15px',
				height: '15px'
			}
		}])

		this.show()

		// this.ballView.draw([{
		// 		tag: 'img',
		// 		id: 'thumb',
		// 		src: 'http://tfile.anyyun.cn/suisui/temp/1.jpg',
		// 		position: {
		// 			top: '10px',
		// 			left: '10px',
		// 			width: '36px',
		// 			height: '36px'
		// 		}
		// 	}, {
		// 		tag: 'font',
		// 		id: 'numberRect',
		// 		text: this.number,
		// 		textStyles: {
		// 			color: '#ffffff',
		// 			size: '10px',
		// 			align: 'center',
		// 			verticalAlign: 'middle'
		// 		},
		// 		position: {
		// 			top: '9px',
		// 			right: '9px',
		// 			width: '15px',
		// 			height: '15px'
		// 		}
		// 	}
		// }])

	}
}

export {
	NativeMessageBall
}
